<template>
  <div class="tableLIst pt-[10px] pb-[10px]">
    <el-table
      :data="tableData"
      border
      style="width: 98%"
      height="70vh"
      >
      <!-- 表头 -->
      <el-table-column
        v-for="item in borderList"
        :key="item.id"
        :label="item.label"
        :prop="item.prop"
        :align="item.align || 'center'"
        :width="item.width"
        show-overflow-tooltip
        >
        <template slot-scope="scope">
          <div v-if="!item.type">
            {{ scope.row[item.prop] }}
          </div>
          <div v-if="item.type === 'picUrls'">
            <el-image
            v-for="(item, index) in scope.row.picUrls"
              :key="index"
              :src="item"
              class="w-[40px] h-[40px] pr-[5px]"></el-image>
          </div>
          <div v-if="item.type === 'shareUrl'">
            <div v-if="scope.row.shareUrl === ''">暂无数据</div>
            <div v-if="scope.row.shareUrl !== ''">
              <el-image :src="scope.row.shareUrl" :preview-src-list="[scope.row.shareUrl]" class="w-[58px]"></el-image>
            </div>
          </div>
          <div v-if="item.type === 'button'">
            <elButtons :ElButton="item.btn" :scope="scope"></elButtons>
          </div>
          <div v-if="item.type === 'Tag'">
            <el-tag
            :type="item.filter ? item.filter(scope.row)[1] : scope.row[item.prop]"
            size="small"
            >{{ item.filter ? item.filter(scope.row)[0] : scope.row[item.prop] }}</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'List',
  components: {},
  props: {
    // 搜索
    borderList: {
      // 接受参数必须是一个 对象 数组
      type: [Object, Array],
      // 必填
      required: true
    },
    tableData: {
      // 接受参数必须是一个 对象 数组
      type: [Object, Array],
      // 必填
      required: true
    }
  },
  data () {
    return {}
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {},
  methods: {}
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
